<template>
  <div class="login-page" v-loading="loading">
    <div class="header">
      <div></div>
      <div
          style="width: 300px;font-size: 20px;color: white;padding-right: 10px;padding-top: 10px;position: fixed;right: 50px;bottom: 50px;"><span>{{
          formattedDateTime
        }}</span></div>
    </div>
    <div class="content">
      <div class="title-container">
        <div class="title">全流程智能化审判监督平台</div>
        <div class="explore-more-container">
          <div class="explore-more" @click="menuPage">点击进入 →</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import api from '@/utils/api'
import axios from "axios";
import userData from '@/json/db/user.json'
import {detail} from "@/api/userApi";

export default {
  data() {
    return {
      now: new Date(),
      timer: null,
      loading: true,
    }
  },
  computed: {
    formattedDateTime() {
      const {now} = this;
      const year = now.getFullYear();
      const month = ('0' + (now.getMonth() + 1)).slice(-2);
      const day = ('0' + now.getDate()).slice(-2);
      const hours = ('0' + now.getHours()).slice(-2);
      const minutes = ('0' + now.getMinutes()).slice(-2);
      const seconds = ('0' + now.getSeconds()).slice(-2);

      return `${year}年${month}月${day}日 ${hours}时${minutes}分${seconds}秒`;
    }
  },
  mounted() {
    setTimeout(() => {
      this.loading = false;
    }, 1500);

    this.timer = setInterval(() => {
      this.now = new Date();
    }, 1000);
  },
  methods: {
    getUserDetail() {
      const self = this
      const obj = {}
      obj.id = this.$globalUserId
      detail(obj).then(data => {
        if (data.code == 200) {
          self.userDetail = data.data
          self.getTableList1()
          self.getTableList2()
        } else {
          self.$message.error(data.msg);
        }
      })
    },
    menuPage() {
      const obj = require("@/json/db/user.json")
      api.addUser(obj);
      this.addLog()
      this.$router.push({path: '/menu-v1'});
    },
    alertSuccess(msg) {
      this.$message({
        message: msg,
        type: 'success'
      });
    },
    alertError(msg) {
      this.$message({
        message: msg,
        type: 'error'
      });
    },
    addLog(){
      const user = require("@/json/db/user.json")
      const obj = {}
      obj.module = '系统登录'
      obj.content = '登录了系统'
      obj.userName = user.userName
      api.addLog(obj);
    }
  },
  beforeDestroy() {
    clearInterval(this.timer);
  }
}
</script>

<style scoped>
.title-container {
  display: flex;
  flex-direction: column;
}

.explore-more-container {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}

.explore-more {
  font-size: 35px;
  color: inherit;
  margin-top: 20px;
  border: 1px solid white;
  width: 220px;
  height: 90px;
  text-align: center;
  line-height: 90px;
  border-radius: 10px;
  cursor: pointer;
  background-image: linear-gradient(to right, #ffffff 0%, #ffffff 50%, #073fc6 50%);
  background-size: 200% 100%;
  background-position: right bottom;
  transition: background-position 0.5s ease;
}

.explore-more:hover {
  background-position: left bottom;
  color: black;
}

.title {
  font-family: KaiTi;
  line-height: 1em;
  color: #ffffff;
  font-weight: bold;
  font-style: italic;
  font-size: 80px;
  text-shadow: 0px 0px 0 rgb(160, 160, 160), 1px 1px 0 rgb(64, 64, 64), 2px 2px 0 rgb(-31, -31, -31), 3px 3px 2px rgba(0, 0, 0, 0.05), 3px 3px 1px rgba(0, 0, 0, 0.5), 0px 0px 2px rgba(0, 0, 0, .2);

}

.content {
  width: 1000px;
  height: 600px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
}

.header {
  width: 100%;
  height: 50px;
}


.login-page {
  height: 100vh;
  background: url('@/assets/1705040415345321.jpg') center no-repeat;
  background-size: cover;
}

</style>